<template>
  <div class="players-page">
    <el-card class="page-header">
      <div class="header-content">
        <div class="title-section">
          <h2>选手管理</h2>
          <p>管理和查看所有选手信息</p>
        </div>
        <div class="action-section">
          <el-button type="primary" @click="handleAdd">
            <el-icon><Plus /></el-icon>
            新增选手
          </el-button>
        </div>
      </div>
    </el-card>

    <el-card class="content-card">
      <!-- 搜索筛选区域 -->
      <div class="search-section">
        <el-form :model="searchForm" inline>
          <el-form-item label="选手姓名">
            <el-input 
              v-model="searchForm.name" 
              placeholder="请输入选手姓名"
              clearable
            />
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="searchForm.gender" placeholder="请选择性别" clearable>
              <el-option label="男" value="male" />
              <el-option label="女" value="female" />
            </el-select>
          </el-form-item>
          <el-form-item label="等级">
            <el-select v-model="searchForm.level" placeholder="请选择等级" clearable>
              <el-option label="初级" value="beginner" />
              <el-option label="中级" value="intermediate" />
              <el-option label="高级" value="advanced" />
              <el-option label="专业" value="professional" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">
              <el-icon><Search /></el-icon>
              搜索
            </el-button>
            <el-button @click="handleReset">
              <el-icon><Refresh /></el-icon>
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 数据表格 -->
      <vxe-table
        ref="tableRef"
        :data="tableData"
        :loading="loading"
        border
        stripe
        height="500"
        :pager-config="pagerConfig"
        @page-change="handlePageChange"
      >
        <vxe-column type="seq" width="60" title="序号"></vxe-column>
        <vxe-column field="avatar" title="头像" width="80" align="center">
          <template #default="{ row }">
            <el-avatar :size="40" :src="row.avatar">
              <el-icon><User /></el-icon>
            </el-avatar>
          </template>
        </vxe-column>
        <vxe-column field="name" title="姓名" width="120"></vxe-column>
        <vxe-column field="gender" title="性别" width="80" align="center">
          <template #default="{ row }">
            <el-tag :type="row.gender === 'male' ? 'primary' : 'danger'">
              {{ row.gender === 'male' ? '男' : '女' }}
            </el-tag>
          </template>
        </vxe-column>
        <vxe-column field="age" title="年龄" width="80" align="center"></vxe-column>
        <vxe-column field="level" title="等级" width="100" align="center">
          <template #default="{ row }">
            <el-tag :type="getLevelType(row.level)">
              {{ getLevelText(row.level) }}
            </el-tag>
          </template>
        </vxe-column>
        <vxe-column field="phone" title="联系电话" width="150"></vxe-column>
        <vxe-column field="email" title="邮箱" width="200"></vxe-column>
        <vxe-column field="join_date" title="加入时间" width="120"></vxe-column>
        <vxe-column field="status" title="状态" width="100" align="center">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </vxe-column>
        <vxe-column title="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button 
              type="primary" 
              size="small" 
              @click="handleView(row)"
            >
              <el-icon><View /></el-icon>
              详情
            </el-button>
            <el-button 
              type="warning" 
              size="small" 
              @click="handleEdit(row)"
            >
              <el-icon><Edit /></el-icon>
              编辑
            </el-button>
            <el-button 
              type="danger" 
              size="small" 
              @click="handleDelete(row)"
            >
              <el-icon><Delete /></el-icon>
              删除
            </el-button>
          </template>
        </vxe-column>
      </vxe-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'

// 响应式数据
const loading = ref(false)
const tableRef = ref()

// 搜索表单
const searchForm = reactive({
  name: '',
  gender: '',
  level: ''
})

// 分页配置
const pagerConfig = reactive({
  enabled: true,
  pageSize: 10,
  pageSizes: [10, 20, 50, 100],
  layouts: ['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'Total']
})

// 表格数据
const tableData = ref([
  {
    id: 1,
    name: '张三',
    gender: 'male',
    age: 25,
    level: 'intermediate',
    phone: '13800138001',
    email: 'zhangsan@example.com',
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
    join_date: '2024-01-15',
    status: 'active'
  },
  {
    id: 2,
    name: '李四',
    gender: 'female',
    age: 23,
    level: 'advanced',
    phone: '13800138002',
    email: 'lisi@example.com',
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
    join_date: '2024-02-20',
    status: 'active'
  },
  {
    id: 3,
    name: '王五',
    gender: 'male',
    age: 28,
    level: 'professional',
    phone: '13800138003',
    email: 'wangwu@example.com',
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
    join_date: '2024-01-10',
    status: 'active'
  },
  {
    id: 4,
    name: '赵六',
    gender: 'female',
    age: 22,
    level: 'beginner',
    phone: '13800138004',
    email: 'zhaoliu@example.com',
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
    join_date: '2024-03-05',
    status: 'inactive'
  }
])

// 方法
const handleAdd = () => {
  ElMessage.info('新增选手功能开发中...')
}

const handleView = (row: any) => {
  ElMessage.info(`查看选手: ${row.name}`)
}

const handleEdit = (row: any) => {
  ElMessage.info(`编辑选手: ${row.name}`)
}

const handleDelete = (row: any) => {
  ElMessageBox.confirm(
    `确定要删除选手 "${row.name}" 吗？`,
    '删除确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    ElMessage.success('删除成功')
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

const handleSearch = () => {
  ElMessage.info('搜索功能开发中...')
}

const handleReset = () => {
  Object.assign(searchForm, {
    name: '',
    gender: '',
    level: ''
  })
  ElMessage.info('已重置搜索条件')
}

const handlePageChange = (params: any) => {
  console.log('分页变化:', params)
}

const getLevelType = (level: string) => {
  const levelMap: Record<string, string> = {
    beginner: 'info',
    intermediate: 'warning',
    advanced: 'success',
    professional: 'danger'
  }
  return levelMap[level] || 'info'
}

const getLevelText = (level: string) => {
  const levelMap: Record<string, string> = {
    beginner: '初级',
    intermediate: '中级',
    advanced: '高级',
    professional: '专业'
  }
  return levelMap[level] || '未知'
}

const getStatusType = (status: string) => {
  const statusMap: Record<string, string> = {
    active: 'success',
    inactive: 'info',
    suspended: 'warning',
    banned: 'danger'
  }
  return statusMap[status] || 'info'
}

const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    active: '活跃',
    inactive: '非活跃',
    suspended: '暂停',
    banned: '禁用'
  }
  return statusMap[status] || '未知'
}

onMounted(() => {
  // 组件挂载后的初始化逻辑
})
</script>

<style scoped>
.players-page {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
}

.page-header {
  margin-bottom: 20px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-section h2 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 20px;
}

.title-section p {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.content-card {
  min-height: 600px;
}

.search-section {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #fafafa;
  border-radius: 4px;
}

.search-section .el-form {
  margin: 0;
}

.search-section .el-form-item {
  margin-bottom: 0;
  margin-right: 20px;
}
</style>
